<template>
  <div class="g-sdl">
    <div class="n-user-p">
      <!-- <div class="note"> -->
      <span>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</span>
      <a @click="changelogin">用户登录</a>
      <!-- </div> -->
    </div>
    <!-- 入住歌手 210px -->
    <div class="n-user-m">
      <!-- 头部 -->
      <div class="n-user-top">
        <span >入住歌手</span>
        <a href="javascript:;" >查看全部></a>
      </div>
      <!-- 中间 -->
      <div class="n-user-cen">
        <ul class="singInfo">
          <li v-for=" singer in  singerList" :key="singer.id" @click="gouserhome(singer.id)">
            <a href="javascript:;" class="itm">
              <!-- img1v1Url -->
              <img :src="singer.img1v1Url" alt="" />
              <!-- <span></span> -->
              <div class="ifo">
                <h4>{{singer.name}}</h4>
                <p>{{singer.alias[0]}}</p>
              </div>
            </a>
          </li>

        </ul>
        <div>
          <a href="JavaScript:;" class="u-btn">
            <i>申请成为网易音乐人</i>
          </a>
        </div>
      </div>
    </div>
    <div class="n-uset-btn">
      <!-- 头部 -->
      <div class="n-user-top">
        <span>热门主播</span>
        <!-- <a href="javascript:;">查看全部></a> -->
      </div>
      <!-- 主播 -->

      <ul class="hotbj-list">
        <li v-for="anchor in hotAnchor.list" :key="anchor.id">
          <a href="javascript:;" class="n-user-btn-img">
            <img :src="anchor.avatarUrl" alt="" />
          </a>
          <div class="info">
            <p>
              <a href="javascript:;"> {{ anchor.nickName }}</a>
            </p>
            <p>心里学家 撩妹高手 善于把女生玩弄掌心</p>
          </div>
        </li>
      </ul>
    </div>
      <Login ref="mylogin" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotAnchor: {},
      singerList:[]
    };
  },
  mounted() {
    this.getHotAnchors();
    this.getSingerList()
  },
  methods: {
    //  getHotAnchor //获取主播
    async getHotAnchors() {
      // 需要一个参数代表多少条数据
      const result = await this.$API.getHotAnchor(5);
      // console.log(result);
      if (result.code == 200) {
        this.hotAnchor = result.data;
      } else {
        alert("主播请求失败");
      }
    },

    // 修改提示框
    changelogin() {
      // this.dialogVisible = true
      this.$refs.mylogin.changeDialog();
    },
    
    // 获取歌手 reqSingerList
    // 歌手分类列表
    // limit : 返回数量 , 默认为 30
    // offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值 ,
    //  默认为 0 initial: 按首字母索引查找参数,如 /artist/list?type=1&area=96&initial=b 返回内容将以 name 字段开头为 b 或者拼音开头为 b 为顺序排列, 热门传-1,#传 0
    // type 取值:// -1:全部 1:男歌手  2:女歌手  3:乐队
    // area 取值: -1:全部  7华语 96欧美 8:日本 16韩国 0:其他
    // 接口地址 : /artist/list
    async getSingerList() {
      const result = await this.$API.reqSingerList({
        limit: 6,
        type:-1,
        area:-1
      });
      // console.log(result)
      if (result.code == 200) {
        this.singerList = result.artists
      }else{
        alert('请求失败')
      }
    },
    gouserhome(id){
      // console.log(id)
      this.$router.push(`artist/?id=${id}`)
    }
  },
};
</script>

<style lang="less" scoped>
.g-sdl {
  // 公共
  .n-user-top {
    width: 100%;
    height: 25px;
    // background-color: blueviolet;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(204, 204, 204);
    // 入住歌手字体
    span {
      font-size: 10px;
      // flex-basis:inherit;
      font-weight: bold;
    }
    a {
      font-size: 10px;
      color: rgb(102, 102, 102);
    }
  }
  // 登录
  .n-user-p {
    width: 254px;
    height: 130px;
    background-color: rgb(227, 227, 227);

    span {
      display: block;
      // margin-top: 20px;
      width: 205px;
      font-size: 12px;
      margin: 0 auto;
      padding-top: 20px;
      line-height: 20px;
    }
    a {
      background: url("~@/assets/image/index.png");
      background-position: 0 -195px;
      display: block;
      width: 100px;
      height: 31px;
      line-height: 31px;
      margin-right: 10px;
      text-align: center;
      color: #fff;
      margin: 20px auto;
      font-size: 14px;
      //  margin-top: 20px;
      //  text-indent: -9999px;
    }
  }
  //   入住歌手
  .n-user-m {
    padding-top: 10px;
    width: 210px;
    //  height: 300px;
    // background-color: aqua;
    margin: 0 auto;
    // 上班部分

    // 中间部分
    .n-user-cen {
      // ul快
      .singInfo {
        // 整块
        .itm {
          display: flex;
          border: 1px solid rgb(233, 233, 233);
          background-color: rgb(250, 250, 250);
          margin-top: 10px;
          img {
            height: 62px;
            width: 62px;
          }
          .ifo {
            font-size: 12px;
            margin-left: 10px;
            line-height: 25px;
            margin-top: 5px;
            h4 {
              color: #000;
            }
            p {
              color: rgb(102, 102, 102);
            }
          }
        }
      }
      // 申请音乐人
      .u-btn {
        // margin-top: 10px;
        margin: 10px auto;
        background: url("~@/assets/image/button2.png");
        background-position: right -98px;
        display: inline-block;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        vertical-align: top;
        text-align: center;
        height: 31px;
        width: 210px;
        cursor: pointer;
        //   margin-left: 20px;
        border-radius: 4px;
        i {
          //  margin: 0 auto;
          font-size: 10px;
          color: #000;
          height: 31px;
          display: inline-block;
          width: 206px;
          margin-left: -4px;
          background: url("~@/assets/image/button2.png");
          background-position: 0 -59px;
        }
      }
    }
  }
  .n-uset-btn {
    width: 210px;
    margin: 0 auto;
    margin-top: 10px;
    .hotbj-list {
      li {
        display: flex;
        margin: 10px 10px;
      }

      // 图骗
      .n-user-btn-img {
        img {
          height: 40px;
          width: 40px;
        }
      }
      // 名字及其介绍
      .info {
        margin-left: 10px;
        line-height: 20px;
        p {
          font-size: 12px;
          width: 159px;
          color: rgb(102, 102, 102);
          // 隐藏
          overflow: hidden;
          // 省略号
          text-overflow: ellipsis;
          // 一行显示
          white-space: nowrap;
        }
        p a {
          color: #000;
        }
      }
    }
  }
}
</style>
